import defaultSettings from '@/settings';
import { useDynamicTitle } from '@/utils/dynamicTitle';
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { handleThemeStyle } from '@/utils/theme';

const {
  theme: defaultTheme,
  sideTheme: defaultSideTheme,
  showSettings: defaultShowSettings,
  topNav: defaultTopNav,
  tagsView: defaultTagsView,
  fixedHeader: defaultFixedHeader,
  sidebarLogo: defaultSidebarLogo,
  dynamicTitle: defaultDynamicTitle,
} = defaultSettings;

const storageSetting: typeof defaultSettings = JSON.parse(
  localStorage.getItem('layout-setting') || '{}'
);

export const useSettingsStore = defineStore('settings', () => {
  const title = ref<string>('管理系统');
  const theme = ref<string>(defaultTheme);
  const sideTheme = ref<string>(defaultSideTheme);
  const showSettings = ref<boolean>(defaultShowSettings);
  const topNav = ref<boolean>(false);
  const tagsView = ref<boolean>(true);
  const fixedHeader = ref<boolean>(true);
  const sidebarLogo = ref<boolean>(true);
  const dynamicTitle = ref<boolean>(true);
  const initEnd = ref<boolean>(false);

  const initSetting = async (): Promise<void> => {
    if (initEnd.value) return;
    const config = await defaultSettings.initDbSetting();
    // const config = null as any;

    theme.value = storageSetting.theme || config.theme || defaultTheme;
    sideTheme.value = storageSetting.sideTheme || config.sideTheme || defaultSideTheme;

    // 顶部导航
    if (storageSetting.topNav === undefined) {
      topNav.value = config.topNav === undefined ? defaultTopNav : config.topNav;
    } else {
      topNav.value = storageSetting.topNav;
    }

    // tab 栏
    if (storageSetting.tagsView === undefined) {
      tagsView.value = config.tagsView === undefined ? defaultTagsView : config.tagsView;
    } else {
      tagsView.value = storageSetting.tagsView;
    }

    // 固定顶部栏
    if (storageSetting.fixedHeader === undefined) {
      fixedHeader.value = config.fixedHeader === undefined ? defaultFixedHeader : config.fixedHeader;
    } else {
      fixedHeader.value = storageSetting.fixedHeader;
    }

    // 显示 Logo
    if (storageSetting.sidebarLogo === undefined) {
      sidebarLogo.value = config.sidebarLogo === undefined ? defaultSidebarLogo : config.sidebarLogo;
    } else {
      sidebarLogo.value = storageSetting.sidebarLogo;
    }

    // 动态标题
    if (storageSetting.dynamicTitle === undefined) {
      dynamicTitle.value = config.dynamicTitle === undefined ? defaultDynamicTitle : config.dynamicTitle;
    } else {
      dynamicTitle.value = storageSetting.dynamicTitle;
    }

    initEnd.value = true;
    handleThemeStyle(theme.value);
  };

  const changeSetting = (data: { key: keyof typeof storageSetting; value: any }): void => {
    const { key, value } = data;
    const stateRefs = {
      theme,
      sideTheme,
      topNav,
      tagsView,
      fixedHeader,
      sidebarLogo,
      dynamicTitle,
      showSettings
    };

    if (key in stateRefs) {
      (stateRefs[key] as any).value = value;
    }
  };

  const setTitle = (changeTitle: string): void => {
    title.value = changeTitle;
    useDynamicTitle();
  };

  return {
    title,
    theme,
    sideTheme,
    showSettings,
    topNav,
    tagsView,
    fixedHeader,
    sidebarLogo,
    dynamicTitle,
    initEnd,

    initSetting,
    changeSetting,
    setTitle
  };
});

export default useSettingsStore;
